import React, { memo } from 'react';
import { InfoCircleOutlined } from '@ant-design/icons';
import { Card, DatePicker, Tooltip as AntdToopTip } from 'antd';
import numeral from 'numeral';
import moment from 'moment';
import { Chart, Geom, Axis, Tooltip, Legend } from 'bizcharts';
import styles from './index.less';

const { RangePicker } = DatePicker;

const Receive = memo(
  ({
    loading,
    receData,
    receMonth,
    handlePanelChange,
    selectMonth,
    receAddTotal,
    receRedTotal,
  }) => (
    <Card
      loading={loading}
      title="接单量对比"
      extra={
        <RangePicker
          allowClear={false}
          placeholder={['开始月份', '结束月份']}
          format="YYYY-MM"
          value={receMonth}
          // mode={['month', 'month']}
          picker="month"
          onPanelChange={handlePanelChange}
          disabledDate={current => current && current > moment().endOf('day')}
          // showTime
          onChange={dates => selectMonth(dates)}
        />
      }
    >
      <div className={styles.salesCard}>
        <div style={{ position: 'relative', margin: '0 24px' }}>
          <span style={{ fontSize: 16 }}>
            增减员接单量对比
            <AntdToopTip
              title={
                <div>
                  <p>增员接单量：按月统计整个公司的增员任务接单量；</p>
                  <p>减员接单量：按月统计整个公司的减员任务接单量；</p>
                </div>
              }
              overlayStyle={{ minWidth: 260 }}
            >
              <InfoCircleOutlined
                style={{ marginLeft: 5, color: 'rgba(0,0,0,.45)', fontSize: 14 }}
              />
            </AntdToopTip>
          </span>
          <span style={{ position: 'absolute', right: 24, top: 0 }}>
            <span
              style={{
                display: 'inline-block',
                marginRight: 5,
                width: 5,
                height: 5,
                borderRadius: '50%',
                backgroundColor: '#1890FF',
                verticalAlign: 'middle',
              }}
            />
            增员接单量 {numeral(receAddTotal).format('0,0')}
            <span
              style={{
                display: 'inline-block',
                marginLeft: 50,
                marginRight: 5,
                width: 5,
                height: 5,
                borderRadius: '50%',
                backgroundColor: '#2ebe59',
                verticalAlign: 'middle',
              }}
            />
            减员接单量 {numeral(receRedTotal).format('0,0')}
          </span>
        </div>
        <Chart
          height={400}
          data={receData}
          scale={{
            month: {
              range: [0, 0.98],
            },
          }}
          forceFit
          style={{ marginTop: 30, paddingRight: 24 }}
        >
          <Legend />
          <Axis name="month" />
          <Axis
            name="num"
            label={{
              formatter: val => (val && numeral(val).format('0,0')) || 0,
            }}
          />
          <Tooltip
            g2-tooltip={{ backgroundColor: '#595959', color: '#fff' }}
            crosshairs={{
              type: 'y',
            }}
          />
          <Geom
            type="line"
            position="month*num"
            size={2}
            color="type"
            shape="smooth"
            tooltip={[
              'type*num',
              (type, num) => ({
                name: type,
                value: (num && numeral(num).format('0,0')) || 0,
              }),
            ]}
          />
          <Geom
            type="point"
            position="month*num"
            size={4}
            shape="circle"
            color="type"
            style={{
              stroke: '#fff',
              lineWidth: 1,
            }}
            tooltip={[
              'type*num',
              (type, num) => ({
                name: type,
                value: (num && numeral(num).format('0,0')) || 0,
              }),
            ]}
          />
        </Chart>
      </div>
    </Card>
  )
);

export default Receive;